// pages/index/detail/detail.js
// 模拟数据
import { recommendData } from '../../../utils/mockData.js';
// 后端请求数据
import { reqRecipeListData } from '../../../api/index/recipeList';
Page({
  data: {
    recipeDetail: {},
    relatedRecipes: [],
    // 顶部横向导航与状态
    currentTab: 0,
    scrollIntoView: '',
    navTabs: [
      { name: '食谱介绍' },
      { name: '食材清单' },
      { name: '制作步骤' },
      { name: '营养信息' }
    ]
  },

  onLoad(options) {
    // 优先从 eventChannel 获取完整对象，兜底使用 URL 参数
    const eventChannel = this.getOpenerEventChannel && this.getOpenerEventChannel();
    if (eventChannel && eventChannel.on) {
      eventChannel.on('recipeData', ({ item, type, index }) => {
        // 直接使用传入对象构建详情
        this.setData({ recipeDetail: this.buildRecipeDetailFromItem(item) });
      });
    }

    // 兜底：如果没有通过 eventChannel 传对象，则根据 URL 参数回查
    const { index, type } = options || {};
    if (index !== undefined && type) {
      this.loadRecipeDetail(index, type);
    }
  },

  /**
   * 将列表项构造成详情页数据结构
   */
  buildRecipeDetailFromItem(item) {
    if (!item) return {};
    // 保留原有 loadRecipeDetail 中的增强字段，使用列表项基础字段补齐
    const base = {
      title: item.meishiName,
      image: item.meishiPhoto,
      author: item.author || { avatar: item.authorAvatar, name: item.authorName },
      desc: item.description || item.desc
    };

    const recipeDetail = {
      ...base,
      publishTime: item.createTime || '2025-01-15',
      views: item.hitNum || '1.2万',
      likes: item.zanNumber || '856',
      comments: item.commentNum || '128',
      rating: item.collectionNum || '4.8',
      isLiked: false,
      description: base.desc || '这是一道经典的家常菜，制作简单，营养丰富。',
      ingredients: Array.isArray(item.ingredients) ? item.ingredients : [
        { name: '主料', amount: '500g' },
        { name: '辅料1', amount: '100g' },
        { name: '调料1', amount: '适量' },
        { name: '调料2', amount: '2勺' },
        { name: '调料3', amount: '1勺' },
        { name: '调料4', amount: '少许' }
      ],
      // 确保steps是数组格式
      steps: Array.isArray(item.steps) ? item.steps : [],
      // steps: item.steps || [
      //   { description: '准备食材，将主料洗净切块，辅料切丝备用。', image: '/assets/images/step1.jpg', tip: '食材要新鲜，切块大小要均匀' },
      //   { description: '热锅下油，放入调料爆香，然后加入主料翻炒。', image: '/assets/images/step2.jpg', tip: '火候要适中，避免炒糊' },
      //   { description: '加入辅料继续翻炒，调味后即可出锅装盘。', image: '/assets/images/step3.jpg', tip: '调味要适量，可以先尝一下味道' }
      // ],
      nutrition: Array.isArray(item.nutrition) ? item.nutrition : [
        { name: '热量', value: '320kcal' },
        { name: '蛋白质', value: '25g' },
        { name: '脂肪', value: '12g' },
        { name: '碳水化合物', value: '18g' },
        { name: '纤维素', value: '5g' },
        { name: '钠', value: '800mg' }
      ]
    };

    return recipeDetail;
  },

  onShow() {
    // 页面显示时的逻辑
  },

  // 加载菜谱详情
  loadRecipeDetail(index, type) {
    // 模拟从不同数据源获取详情
    let baseData;
    switch (type) {
      case 'recommend':
        baseData = recommendData[index] || recommendData[0];
        break;
      case 'hot':
        baseData = recommendData[index] || recommendData[0];
        break;
      default:
        baseData = recommendData[index] || recommendData[0];
    }

    // 构建完整的详情数据
    const recipeDetail = {
      ...baseData,
      // 补充详情页需要的字段
      publishTime: '2024-01-15',
      difficulty: '简单',
      cookTime: '30分钟',
      servings: '2-3人份',
      views: '1.2万',
      likes: '856',
      comments: '128',
      rating: '4.8',
      isLiked: false,
      description: '这是一道经典的家常菜，制作简单，营养丰富。选用新鲜的食材，通过简单的烹饪技巧，就能做出美味可口的佳肴。适合家庭日常制作，也是招待客人的不错选择。',
      ingredients: [
        { name: '主料', amount: '500g' },
        { name: '辅料1', amount: '100g' },
        { name: '调料1', amount: '适量' },
        { name: '调料2', amount: '2勺' },
        { name: '调料3', amount: '1勺' },
        { name: '调料4', amount: '少许' }
      ],
      steps: [
        {
          description: '准备食材，将主料洗净切块，辅料切丝备用。',
          image: '/assets/images/step1.jpg',
          tip: '食材要新鲜，切块大小要均匀'
        },
        {
          description: '热锅下油，放入调料爆香，然后加入主料翻炒。',
          image: '/assets/images/step2.jpg',
          tip: '火候要适中，避免炒糊'
        },
        {
          description: '加入辅料继续翻炒，调味后即可出锅装盘。',
          image: '/assets/images/step3.jpg',
          tip: '调味要适量，可以先尝一下味道'
        }
      ],
      nutrition: [
        { name: '热量', value: '320kcal' },
        { name: '蛋白质', value: '25g' },
        { name: '脂肪', value: '12g' },
        { name: '碳水化合物', value: '18g' },
        { name: '纤维素', value: '5g' },
        { name: '钠', value: '800mg' }
      ]
    };

    // 兜底：当基础数据未提供作者信息时，提供默认作者，避免 wxml 取值为空
    if (!recipeDetail.author) {
      recipeDetail.author = {
        avatar: '/assets/images/default-avatar.jpg',
        name: '美食作者'
      };
    }

    this.setData({
      recipeDetail
    });
  },

  // 收藏/取消收藏
  onLike(e) {
    const isLiked = e.currentTarget.dataset.liked;
    const newLiked = !isLiked;

    this.setData({
      'recipeDetail.isLiked': newLiked,
      'recipeDetail.likes': newLiked ?
        (parseInt(this.data.recipeDetail.likes) + 1).toString() :
        (parseInt(this.data.recipeDetail.likes) - 1).toString()
    });

    wx.showToast({
      title: newLiked ? '收藏成功' : '取消收藏',
      icon: 'success'
    });
  },

  // 分享
  onShare() {
    wx.showActionSheet({
      itemList: ['分享给朋友', '分享到朋友圈', '复制链接'],
      success: (res) => {
        const actions = ['分享给朋友', '分享到朋友圈', '复制链接'];
        wx.showToast({
          title: `选择了${actions[res.tapIndex]}`,
          icon: 'none'
        });
      }
    });
  },

  // 评论
  onComment() {
    wx.showToast({
      title: '跳转到评论页面',
      icon: 'none'
    });
    // 这里可以跳转到评论页面
    // wx.navigateTo({
    //   url: '/pages/comment/comment?recipeId=' + this.data.recipeDetail.id
    // });
  },

  

  // 分享给朋友
  onShareAppMessage() {
    return {
      title: this.data.recipeDetail.title,
      path: `/pages/index/detail/detail?index=0&type=recommend`,
      imageUrl: this.data.recipeDetail.image
    };
  },

  // 标签点击事件
  onTabClick(e) {
    // 将 dataset.index 转为数字，避免与模板中 number 类型严格相等判断失败
    const index = Number(e.currentTarget.dataset.index);
    // 同步更新当前面板与滚动定位
    this.setData({
      currentTab: index,
      scrollIntoView: `nav-${index}`
    });
  },

  // 滑动切换面板事件（与顶部标签联动）
  onSwiperChange(e) {
    const index = e && e.detail ? e.detail.current : 0;
    this.setData({
      currentTab: index,
      scrollIntoView: `nav-${index}`
    });
  },
})